<template>
	<view>
		<uni-nav-bar :fixed="true" right-text="编辑" title="购物车" @clickRight="edit"
		 background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-pd-20">
			<view class="dfj-bg-white dfj-bd-radius-20 dfj-overflow-hide" v-if="list.length>0">
				<view class="dfj-pd-30 dfj-f-30 dfj-t-666">
					<text class="dfj-icon icon-shangjia dfj-mg-r-20"></text> 自营
				</view>
				<checkbox-group @change="checkboxChange">
					<view class="dfj-pd-30 dfj-flex dfj-flex-ai-c dfj-bd-t-e5e" v-for="(item,index) in list" :key="index">
						<label>
							<checkbox :value="String(item.productId)" :checked="item.checked" />
						</label>
						<view class="">
							<image style="width: 160rpx;height: auto;" mode="widthFix" :src="item.iconUrl"></image>
						</view>
						<view class="dfj-flex-1 dfj-mg-l-20">
							<view class="dfj-t-999 dfj-t-ellipsis dfj-t-ellipsis-2">{{ item.productTitle }}</view>
							<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-20">
								<view class="dfj-flex-1 dfj-t-danger dfj-f-35">￥{{ item.productPrice }}</view>
								<view v-if="item.amount">
									<uni-number-box :min="1" :value="item.amount" @change="bindChange($event,index)"></uni-number-box>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>

		<view class="car-bottom dfj-flex dfj-flex-ai-c">
			<checkbox-group @change="changeBook">
				<label>
					<checkbox style="transform:scale(0.9)" :checked="allFlag.checked" :value="allFlag.cb" /> <text class="dfj-v-m">全选</text>
				</label>
			</checkbox-group>
			<view class="dfj-flex-1 dfj-mg-lr-35">合计：<text class="dfj-f-35 dfj-t-danger">{{ total }}</text></view>
			<view>
				<block v-if="isBalance">
					<button class="car-bottom-btn" size="mini" @click="toConfirmOrder()">去结算</button>
				</block>
				<block v-else>
					<button class="car-bottom-btn" @click="deleteList()" size="mini">删除</button>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allFlag: {
					value: 'cb',
					checked: false
				},
				list: [],
				value: 1,
				isBalance: true,
				checkboxList: ''
			};
		},
		onShow() {
			this.getList();
		},
		computed: {
			total() {
				let num = '0.0';
				this.list.map((item, index) => {
					if (this.checkboxList.split(',').indexOf(String(item.productId)) != -1) {
						num = Number(num) + Number(item.productPrice) * item.amount
					}
				})
				return num;
			}
		},
		methods: {
			getList() {
				this.$http({
					url: '/shopCart/getShoppingCartList',
					method: 'GET'
				}).then(res => {
					this.list = res.data
				})
			},
			checkboxChange(e) {
				let values = e.detail.value
				this.checkboxList = values.toString()
				this.list.map((item, index) => {
					if (values.indexOf(String(item.productId)) != -1) {
						item.checked = true
					}
				})
			},
			changeBook(e) {
				if (e.detail.value.length == 0) {
					this.checkboxList = ''
					this.list.map(item => this.$set(item, 'checked', false))
					this.$set(this.allFlag, 'checked', false)
				} else {
					let arr = []
					this.list.map(item => {
						arr.push(item.productId)
						this.$set(item, 'checked', true)
					})
					this.$set(this.allFlag, 'checked', true)
					this.checkboxList = arr.toString()
				}
			},
			deleteList() {
				if(this.checkboxList == ''){
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return false
				}
				this.$http({
					url: '/shopCart/delProductToShoppingCarts',
					data: {
						idListStr: this.checkboxList
					},
					method: 'GET'
				}).then(res=> {
					this.getList()
				})
			},
			toConfirmOrder(){
				if(this.checkboxList == ''){
					uni.showToast({
						title: '还未选择商品',
						icon: 'none'
					})
					return false
				}
				let arr = []
				this.list.map(item => {
					if (this.checkboxList.split(',').indexOf(String(item.productId)) != -1) {
						item.pId = item.productId
						arr.push(item)
					}
				})
				sessionStorage.setItem('infos', JSON.stringify(arr))
				uni.navigateTo({
					url: `/pages/home/confirm-order?isCar=true&checkboxList=${this.checkboxList}`
				})
			},
			edit() {
				// console.log("编辑")
				this.isBalance = !this.isBalance
			},
			bindChange(e,i) {
				if(this.list[i].amount != e){
					this.$http({
						url: '/shopCart/addProductToShoppingCart',
						data: {
							amount: e,
							productId: this.list[i].productId
						}
					}).then(res=> {
						this.list[i].amount = e
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.car-bottom {
		position: fixed;
		background: #fff;
		left: 0;
		right: 0;
		bottom: 95rpx;
		z-index: 99;
		padding: 10rpx 30rpx;

		.car-bottom-btn {
			background: #318CFF;
			color: #fff;
			border-radius: 50rpx;
			vertical-align: top;
		}
	}
</style>
